<template>
  <div id="box">
    <van-nav-bar
      id="header"
      title="3D数字电影院"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="bigbox">
      <div class="title">
        <h3>电影名称</h3>
        <p>2023-03-06 周一 16:50</p>
      </div>
      <div class="centerInfo">
        <div class="centerInfo2">
          <span>可选</span>
          <img style="width: 20px" src="../assets/icon/kexuanzuowei.png" />
        </div>
        <div class="centerInfo2">
          <span>已选</span>
          <img style="width: 20px" src="../assets/icon/yixuanzuowei.png" />
        </div>
        <div class="centerInfo2">
          <span>已售</span>
          <img
            style="width: 20px"
            src="../assets/icon/danrenzuoweixuanzuowei.png"
          />
        </div>
        <div class="centerInfo2">
          <span>维修</span>
          <img style="width: 20px" src="../assets/icon/weixiu.png" />
        </div>
      </div>
      <div class="screen">
        <div class="screen-text">屏幕方向</div>
      </div>
      <div class="smallbox">
        <div class="sbox">
          <div
            v-for="(seatItem, index) in seatList"
            class="seatClass"
            :key="seatItem.id"
            @click="clickzuowei(seatItem)"
            @contextmenu.prevent="changezuowei(seatItem)"
            :style="{
              height: 2 + 'rem',
              width: 2 + 'rem',
              top: seatItem.gRow * 1.8 + 'rem',
              left: seatItem.gCol * 1.8 + 'rem',
            }"
          >
            <img
              class="seatImgClass"
              :seatId="seatItem.id"
              :seatIndex="index"
              :src="seatTypeList[seatItem.type].image"
            />
          </div>
        </div>
      </div>
      <van-cell @click="showPopup" id="vancell"
        ><van-icon name="cart-o" color="#1989fa" id="vanicon"
      /></van-cell>
    </div>

    <van-popup
      v-model:show="showBottom"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <h3 :style="{ position: 'fixed', left: '1rem' }">已选座位</h3>
      <div id="shop" :style="{ overflow: 'auto', marginTop: '3rem' }">
        <div id="shop1" v-for="(item, index) in seatArr" key="'seat'+index">
          <div id="xxx" @click.stop="close(item)">×</div>
          <p>{{ item.gRow }} 排 {{ item.gCol }} 座</p>
          <p class="money">55.00元</p>
        </div>
      </div>
      <div class="btn" @click="ok">确 认 选 座</div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import http from "../util/api";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { get } from "lodash";
import { showSuccessToast, showFailToast } from "vant";
import { showToast } from "vant";

const onClickLeft = () => history.back();
const seatTypeList = [
  {
    name: "可选",
    type: "0",
    seats: 1,
    image: require("../assets/icon/kexuanzuowei.png"),
    isShow: "1",
    position: "up",
  },
  {
    name: "已选",
    type: "0-1",
    seats: 1,
    image: require("../assets/icon/yixuanzuowei.png"),
    isShow: "1",
    position: "up",
  },
  {
    name: "已售",
    type: "0-2",
    seats: 1,
    image: require("../assets/icon/danrenzuoweixuanzuowei.png"),
    isShow: "1",
    position: "up",
  },
  {
    name: "维修",
    type: "0-3",
    seats: 1,
    image: require("../assets/icon/weixiu.png"),
    isShow: "1",
    position: "up",
  },
];

const seatList = ref([]);
const seatArr = ref([]);

http("/seatList", "get", "id").then((res) => {
  if (res.data.length) {
    showSuccessToast("获取成功");
    seatList.value = res.data;
  } else {
    showFailToast("获取失败");
  }
});

//点击座位的时候切换图片。
const clickzuowei = (val) => {
  // console.log(val, "座位信息");
  //循环影厅内座位信息
  seatList.value.forEach((item) => {
    //判断：选中座位和数组内的id是否一致
    http(`/seatList/${item.id}`, "put", item).then((res) => {
      if (item.id == val.id) {
        //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
        if (item.type == 0) {
          item.type = 1;
          seatArr.value.push(item);
          // console.log("seatArr", seatArr);
          //如果状态是1，也就是已经选中的状态，点击就会变成未选中
        } else if (item.type == 1) {
          item.type = 0;
          // console.log(val, "座位信息");
          seatArr.value.splice(item, 1);
          // console.log("删除后seatArr",seatArr,item);
          //如果状态2，也就是已经出售的座位，就提示重新选座
        } else if (item.type == 2) {
          showToast("该座位已占用，请重新选座");
          //如果状态3，代表座位损坏，也是提示维修中。
        } else if (item.type == 3) {
          showToast("此座位损坏，正在维修中！");
        }
      }
    });
  });
};

const ok = () => {
  //筛选出选择的座位
  let info = seatList.value.filter((item) => {
    return item.type == 1;
  });

  // console.log(info);
  info.forEach((item) => {
    http(`/seatList/${item.id}`, "put", item).then((res) => {
      if (item.type == 1) {
        item.type = 2;
        // console.log(item);
        if (res.status === 200) {
          ElMessage({
            type: "success",
            message: "修改成功！",
          });
        } else {
          ElMessage({
            type: "error",
            message: "修改失败！",
          });
        }
      }
    });
  });
  //  有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
  if (info.length == 0) {
    showToast("请先选择座位！");
  } else {
  }
};

const showBottom = ref(false);
const showPopup = () => {
  showBottom.value = true;
};

const close = (id) => {
  seatArr.value.forEach((item) => {
    // console.log("点击了事件");
    seatArr.value.splice(item, 1);
    item.type = 0;
  });
};
</script>

<style scoped>
#box {
  height: 40rem;
  background-color: rgb(238, 238, 243);
  overflow: hidden;
}
#header {
  background-color: #ff4c4c;
  position: fixed;
  top: 0px;
  width: 100%;
}
.seatClass {
  position: absolute;
  /* display: none; */
}
.sbox {
  position: relative;
  height: 100%;
  width: 35rem;
  left: 50%;
  transform: translate(-40%);
  /* background-color: yellow; */
  margin-left: 1rem;
}
.smallbox {
  position: relative;
  margin-top: -40px;
  height: 28rem;
  overflow-x: scroll;
  /* background-color: #ff4c4c; */
}
.seatImgClass {
  /* position: absolute; */
  top: 0;
  left: 0;
  height: 100%;
}
.title {
  width: 100%;
  height: 5rem;
  /* background-image: linear-gradient(45deg, #9fa5d5, #aebaf8); */
  /* text-align: center; */
  line-height: 1rem;
  background-color: white;
  letter-spacing: 0.05rem;
  padding-left: 0.8rem;
  padding-top: 3rem;
}
.title p {
  color: gray;
}
.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: gray;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}
.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 1rem;
}
.centerInfo2 {
  display: flex;
  align-items: center;
}
.screen {
  width: 15rem;
  border: 1.7rem solid #ccc;
  border-color: #ccc transparent transparent transparent;
  height: 1.5rem;
  margin: auto;
  margin-top: 0.7rem;
}
.screen-text {
  text-align: center;
  white-space: nowrap;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-top: -1.5rem;
}
.btn {
  position: fixed;
  bottom: 1rem;
  /* left: 0; */
  width: 80%;
  height: 3rem;
  background-color: orange;
  text-align: center;
  line-height: 3rem;
  color: #fff;
  margin-left: 50%;
  transform: translate(-50%);
  border-radius: 0.5rem;
  font-size: 1.3rem;
}
#bigbox {
  /* background-color: pink; */
  /* height: 100%; */
  position: relative;
}
#vancell {
  position: fixed;
  bottom: 5rem;
  background-color: white;
  width: 4rem;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  padding: 0.7rem;
  border-radius: 50%;
  border: 0.1rem solid rgb(25, 137, 250);
  right: 1rem;
}
#vanicon {
  font-size: 2.3rem;
}
#shop {
  height: 6rem;
  /* background-color: pink; */
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
  width: 80rem;
}
#shop1 {
  height: 4rem;
  width: 6rem;
  background-color: white;
  border: 0.1rem solid gray;
  border-radius: 0.3rem;
  text-align: center;
  margin-right: 1rem;
  position: relative;
}
#shop1 p {
  font-size: 1rem;
  line-height: 0.6rem;
}
.money {
  color: orangered;
}
#xxx {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  /* background-color: yellow; */
}
</style>